<template>
    <div class="foot">
        <div class="floor1">
            <h1>订阅我们的新闻简讯</h1>
            <p class="p1">可以接受关于流行趋势、促销等活动的新消息!</p>
            <input type="text" placeholder="输入您的电子邮箱">
            <p class="p2">我想要取消订阅</p>
        </div>
        <div class="floor2">
            <div class="content">
                <div class="chat">
                    <p class="chat_1">需要帮助?</p>
                    <p class="chat_4">启动聊天<span>Online</span></p>
                    <p class="chat_3">星期一到星期五09:00至22:00</p>
                    <p class="chat_3">星期六到星期天10:00至18:00</p>
                    <p class="chat_4">4008202166<span>Online</span></p>
                    <p class="chat_3">星期一到星期五 09:00至22:00</p>
                    <p class="chat_3">星期六10:00至18:00</p>
                    <p class="chat_3">星期天10:00至18:00</p>
                </div>
                <ul class="help">
                    <li class="chat_1">帮助</li>
                    <li class="chat_2">线上选购</li>
                    <li class="chat_2">付款</li>
                    <li class="chat_2">配送</li>
                    <li class="chat_2">配货</li>
                    <li class="chat_2">电子票据</li>
                </ul>
           
            
                <ul class="weare">  
                    <li class="chat_1">We are Drew&Bershka</li>
                    <li class="chat_2">关于Bershka</li>
                    <li class="chat_2">关于Drew</li>
                    <li class="chat_2">加入我们</li>
                    <li class="chat_2">媒体</li>
                </ul>
                <ul class="belike">
                    <li class="chat_1">您可能感兴趣的商品</li>
                    <li class="chat_2">针织衫和开襟衫</li>
                    <li class="chat_2">外套、夹克</li>
                    <li class="chat_2">卫衣</li>
                    <li class="chat_2">长裤</li>
                    <li class="chat_2">马甲</li>
                </ul>
                <ul class="icon">
                    <img src="../assets/icon/wx.svg" alt="">
                    <img src="../assets/icon/wb.svg" alt="">
                    <img src="../assets/icon/dy.svg" alt="">
                </ul>
            </div>
            
        </div>
        <div class="floor3">
            <div class="content">
                <p>
                    条款&条件&nbsp;&nbsp;&nbsp;·&nbsp;&nbsp;&nbsp;隐私政策&nbsp;&nbsp;&nbsp;·&nbsp;&nbsp;&nbsp;Cookies政策&nbsp;&nbsp;&nbsp;·&nbsp;&nbsp;&nbsp;上海工商&nbsp;&nbsp; <img src="../assets/icon/sprite-legal-cn.png" alt=""> &nbsp;·&nbsp;&nbsp;&nbsp;
                </p>
                <p>
                    沪ICP备12030822号-6&nbsp;&nbsp;&nbsp;·&nbsp;&nbsp;&nbsp;沪公网安备 31010502001466号&nbsp;&nbsp;&nbsp; <img src="../assets/icon/fillingNumer_cn.png" alt=""> &nbsp;·&nbsp;&nbsp;&nbsp;配置Cookies
                </p>
            </div>
        </div>
            
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="scss">
   .foot{
       width: 100%;
       padding: 0;
       margin: 0;
       .floor1{
           color: black;
           width: 100%;
           height: 350px;
           background-color: white;
           text-align: center;
           h1{
               font-size: 40px;
               padding-top: 70px;
           }
           .p1{
               padding: 4px 0 32px 0;
               font-size: 16px;
           }
           input{
               width: 380px;
               padding: 10px;
               border-radius: 7px;
               border: 1px solid rgb(27, 27, 27);
           }
           .p2{
               padding-top: 30px;
               font-size: 13px;
               cursor: pointer;
           }
       }
       .floor2{
           height: 300px;
           .content{
               width: 95%;
               padding: 40px 0;
               border-top: 1px solid gray;
               margin: 0 auto;
               position: relative;
               text-align: left;

                .chat_1{
                    font-weight: 700;
                    font-size: 17px;
                    padding: 0 0 16px;
                    color: black;
                    
                }
                .chat_2{
                    font-size: 13px;
                    padding-bottom: 15px;
                    color: black;
                    cursor: pointer;
                }
                .chat_3{
                    font-size: 12px;
                    color: #8c8c8c;
                }
                .chat_4{
                    font-size: 13px;
                    color: black;
                    padding-top: 20px;
                    span{
                        font-size: 12px;
                        padding: 0 0 0 8px;
                        color: #21d8a1;
                    }
                }
               .chat{
                    display: inline-block;
                    width: 200px;
                    position: absolute;
                    left: 0px;
                    
                }
                .help{
                    width: 100px;
                    display: inline-block;
                    position: absolute;
                    left: 350px;
                }
                .weare{
                    width: 200px;
                    display: inline-block;
                    position: absolute;
                    left: 600px;
                }
                .belike{
                    width: 300px;
                    display: inline-block;
                    position: absolute;
                    left: 950px;
                }
                .icon{
                    width: 150px;
                    height: 50px;
                    position: absolute;
                    right: 0;
                }
           }

       }
       .floor3{
           height: 100px;
        //    background-color: rgb(211, 206, 236);
           .content{
               width: 95%;
               padding: 20px 0;
               border-top: 1px solid gray;
               margin: 0 auto;
               position: relative;
               text-align: left;
               p{
                   font-size: 13px;
                   color: black;
                   font-weight: 500;
               }
           }
       }
   }
</style>